<script setup lang="ts">
import { ref, computed, unref, h, toRaw, reactive, type PropType, watch } from 'vue';
import { Modal, Timeline, TimelineItem, Button, Spin } from 'ant-design-vue';
import type { Recordable } from "@vben/types";
import { isFunction } from "@/utils/is";
import { ClockCircleOutlined } from '@ant-design/icons-vue';
import {
  paseTags
} from '@/views/heng/yw2/ywApproveList/role.data';
import approverComment from '@/views/components/approverLogComment/list.vue';

const emit = defineEmits(['success', 'register']);

const loading = ref(false);
const isFirstLoaded = ref<Boolean>(false);
const dataList = ref([]);
const approverCommentRef = ref();
const accepter_data = ref({})


defineOptions({ name: 'approverLogViewRef' });
const props = defineProps({
  approveNo: { type: String, default: "" },
  approvalLogId: { type: String, default: "" },
  api: { type: Function as PropType<(arg?: any) => Promise<Recordable<any>>> },
  afterFetch: {
    type: Function as PropType<Fn>,
    default: null,
  },
});



watch(
  () => props.approveNo,
  (value) => {
    if (value) {
      fetch();
    }
  },
  { deep: true },
);

function reloadFn() {
  if (props.approveNo) {
    fetch();
    approverCommentRef.value.reloadFn();
  }
}

async function fetch() {
  let { api, afterFetch, approveNo, approvalLogId } = props;
  if (!api || !isFunction(api) || loading.value) return;
  loading.value = true;
  dataList.value = [];
  let res;
  let t_list = [];
  let params = {
    approveNo
  }
  try {
    // console.log("---fetch---", approveNo);

    res = await api(params);
    t_list = res.data.nodes;
    if (afterFetch && isFunction(afterFetch)) {
      t_list = (await afterFetch(res)) || res.data.nodes;
    }
  } catch (e) {
    console.error(e);
  }
  loading.value = false;
  if (!t_list) return;

  dataList.value = (t_list as Recordable<any>[]) || [];
  isFirstLoaded.value = true;
}


defineExpose({
  reloadFn,
})

function getColor(status) {
  let color = "";
  if (status == 1) {
    color = "orange";
  }
  if (status == 2) {
    color = "green";
  }
  if (status == 99) {
    color = "red";
  }
  return color;
}
</script>

<template>
  <div style="margin-top: 20px">
    <div style="display: flex;">
      <div style="flex: 1;">
        <div style="margin-bottom: 5px;">审批详情:</div>
        <Timeline>
          <div v-for="(item, index) in dataList" :key="index">
            <TimelineItem :color="getColor(item.status)">
              <template v-if="item.status == 1" #dot>
                <clock-circle-outlined />
              </template>
              <div style="display: flex;">
                <div>{{ item.userName }}</div>
                <div class="line-item">{{ item.approverType == 1 ? '审批人' : '知会人' }}</div>
                <div class="line-item line-time" v-if="item.passTime">{{ item.passTime }}</div>
                <div class="line-item" :style="{ color: paseTags(item).color }">{{ paseTags(item).val }}</div>
              </div>
              <div v-if="item.comment" style=" border-radius: 8px;background: #ebe9e9;font-size: 12px;cursor: pointer;">
                <div style="padding: 10px;">
                  <div>
                    <span>{{ item.comment }}</span>
                  </div>
                </div>
              </div>
            </TimelineItem>
          </div>

        </Timeline>
      </div>
      <div style="flex: 1;">
        <approverComment ref="approverCommentRef" :approveNo="props.approveNo" @success="reloadFn"
          :approvalLogId="props.approvalLogId"></approverComment>
      </div>
    </div>

  </div>
</template>

<style scoped lang="less">
.line-time {
  color: gray;
  font-size: 12px;
}

.line-item {
  margin-left: 3px;
}
</style>
